<template>
  <div style="padding: 20px">
    <section id="statistics">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align: middle" />
          <i>体征检测数据</i>
        </div>
        <div class="time">
          <DatePicker
            format="yyyy/MM/dd"
            placeholder="创建时间"
            type="daterange"
            show-week-numbers
            @on-change="dateChange"
            split-panels
            v-model="bloc.form.date"
            style="width: 200px; margin-right: 5px"
          ></DatePicker>
        </div>
      </div>
      <div class="bottom">
        <Table
          border
          :loading="bloc.loading"
          :columns="columns2"
          highlight-row
          :data="bloc.paged.items"
        >
          <template slot-scope="{ row }" slot="action">
            <Button size="small" type="error" @click="removeItem(row)">
              删除
            </Button>
          </template>
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="(val) => bloc.load(val, bloc.paged.pageSize, this.affiliateId)"
              @on-page-size-change="
                (val) => bloc.load(bloc.paged.pageIndex, val, this.affiliateId)
              "
            />
          </slot>
        </Table>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { MassageBloc } from "@/view/member/bloc/MassageBloc";
import { formatDate } from "@/base/util/Dates";
import { Health } from "@/base/model/Health";

@Component({
  components: {},
})
export default class extends Vue {
  @Prop(Number) affiliateId!: number;
  columns2 = [
    {
      title: "ID",
      key: "id",
      align: "left",
      minWidth: 160,
      tooltip: true,
    },
    {
      title: "疲劳指数",
      key: "arr",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    {
      title: "心率",
      key: "hr",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    {
      title: "微循环",
      key: "hrv",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    // {
    //   title: "PBF_H体脂率",
    //   key: "pbf",
    //   align: "left",
    //   minWidth: 100,
    //   tooltip: true,
    // },
    // {
    //   title: "PBW体水分率",
    //   key: "pbw",
    //   align: "left",
    //   minWidth: 100,
    //   tooltip: true,
    // },
    {
      title: "血氧",
      key: "qt",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    {
      title: "呼吸率",
      key: "rr",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    {
      title: "焦虑指数",
      key: "sna",
      align: "left",
      minWidth: 100,
      tooltip: true,
    },
    {
      title: "创建时间",
      align: "left",
      render: (h: any, params: any) => {
        return h("span", {
          domProps: {
            innerText: formatDate(
              new Date(params.row.created),
              "yyyy-MM-dd hh:mm:ss"
            ),
          },
        });
      },
      minWidth: 160,
      tooltip: true,
    },
    {
      title: "操作",
      slot: "action",
      width: 47 * 1 + 61 * 0 + 75 * 0 + 20,
      align: "left",
      tooltip: true,
    },
  ];
  bloc: MassageBloc = new MassageBloc();

  dateChange() {
    this.bloc.load(1, 15, this.affiliateId).catch((e) => {
      this.$Message.error("操作错误");
    });
  }

  removeItem(dataItem: Health) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then((value) => {
            this.bloc.load(
              this.bloc.paged.pageIndex,
              this.bloc.paged.pageSize,
              this.affiliateId
            );
          })
          .then(() => {
            this.$Message.success("删除成功");
          })
          .catch((e) => {
            this.$Message.error("删除失败");
          });
      },
    });
  }

  mounted() {
    this.bloc
      .load(
        this.bloc.paged.pageIndex,
        this.bloc.paged.pageSize,
        this.affiliateId
      )
      .catch((e) => {
        this.$Message.error("操作错误");
      });
  }
}
</script>
<style lang="less" scoped>
#statistics {
  .top {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 20px;

    i {
      font-size: 20px;
    }

    .time {
      float: right;
      margin-right: 210px;
    }
  }
}
</style>
